
<template>
  <div class="owner-share h-full w-full flex items-center justify-center" @click="closeDlalog">
    <div class="relative h-586rpx w-574rpx rounded-30rpx bg-hex-ccc" @click.stop @longpress="saveAlbum">
      <image
        class="h-full w-full"
        :src="`${cdnUrl}/imgs/mine/dralogbg.png${imgVersion}`"
        mode="scaleToFill"
      />
      <div class="absolute left-55rpx top-140rpx z-999">
        <div class="w-468rpx flex-col items-center justify-center">
          <div class="text-center">
            <image
              class="h-96rpx w-96rpx rounded-50%"
              :src="userInfo.avatar_url"
              mode="scaleToFill"
            />
          </div>
          <div class="text-center text-28rpx font-600 text-hex-ABCD03">{{ userInfo.nickname }}</div>
          <div class="pt-32rpx text-24rpx font-400 text-hex-7C8699">{{ userInfo.remark??'暂无简介' }}</div>
        </div>
      </div>
      <div class="absolute bottom-20rpx right-25rpx">
        <image :src="wxQrcode" class="h-120rpx w-120rpx" />
        <!-- <canvas canvas-id="qrcode" style="height: 120rpx;width: 120rpx;" /> -->
      </div>
      <div class="absolute left-255rpx -bottom-100rpx" @click.stop="closeDlalog">
        <image
          class="h-64rpx w-64rpx"
          :src="`${cdnUrl}/imgs/mine/close.png${imgVersion}`"
          mode="scaleToFill"
        />
      </div>
      <div class="absolute z-3333" />
    </div>
  </div>

</template>

<script lang="ts" setup>
import QR from 'qrcode-base64'

const props = defineProps({
  userInfo: { type: Object, required: true, default: () => {} },
})
const emits = defineEmits(['close'])

const instance = getCurrentInstance()
let qrcodeURL = $ref('')
//获取小程序码
let wxQrcode = $ref('')
const userId = props.userInfo.id
const getQrcode = async () => {
  const reqData = {
    method: 'post',
    data: {
      'page': 'pages-square/my',
      'scene': userId,
      'check_path': false,
      'env_version': envVersion,
    },
  }
  const { data, status, error } = await Fetch('/api/wx/getwxacode', reqData)
  if (status === 200 && data.code === 0) {
    wxQrcode = data.result
  }
}
const downLoadCode = () => {
  let base64 = wxQrcode.replace(/^data:image\/\w+;base64,/, '')//去掉data:image/png;base64,
  let number = Math.random() * 10
  let filePath = `${wx.env.USER_DATA_PATH}/img${number}.png${imgVersion}`
  uni.getFileSystemManager().writeFile({
    filePath, //创建一个临时文件名
    data: base64, //写入的文本或二进制数据
    encoding: 'base64', //写入当前文件的字符编码
    success: res => {
      uni.saveImageToPhotosAlbum({
        filePath,
        success(res2) {
          uni.showToast({
            title: '已保存至本地',
            icon: 'none',
            duration: 2000,
          })
        },
        fail() {
          uni.showToast({
            title: '取消保存',
            icon: 'error',
            duration: 2000,
          })
        },
      })
    },
    fail: (err) => {
      console.log(err, '--------------------')
    },
  })
}
const saveAlbum = () => {
  uni.getSetting({ //获取用户的当前设置
    success: (res) => {
      if (res.authSetting['scope.writePhotosAlbum']) {//验证用户是否授权可以访问相册
        downLoadCode()
      } else {
        uni.authorize({ //如果没有授权，向用户发起请求
          scope: 'scope.writePhotosAlbum',
          success: () => {
            downLoadCode()
          },
          fail: () => {
            uni.showModal({
              content: '检测到您没打开保存图片的权限，是否去设置打开？',
              confirmText: '确认',
              cancelText: '取消',
              success: (res) => {
                if (res.confirm) {
                  uni.openSetting({
                    success: (res) => {
                      console.log(res)
                      // this.getLocation();
                    },
                  })
                } else {
                  console.log('取消')
                  return false
                }
              },
            })
            setTimeout(() => {
              uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
                success: (res2) => {
                  // console.log(res2.authSetting)
                },
              })
            }, 3000)
          },
        })
      }
    },
  })

}
onMounted(() => {
  // let qr = new UQRCode()
  // // 设置二维码内容
  // qr.data = 'https://uqrcode.cn/doc'
  // // 设置二维码大小，必须与canvas设置的宽高一致
  // qr.size = 60
  // // 调用制作二维码方法
  // qr.make()
  // // 获取canvas上下文
  // let canvasContext = uni.createCanvasContext('qrcode', instance) // 如果是组件，this必须传入
  // // 设置uQRCode实例的canvas上下文
  // qr.canvasContext = canvasContext
  // // 调用绘制方法将二维码图案绘制到canvas上
  // qr.drawCanvas()
  qrcodeURL = QR.drawImg('dddddddddddddddss', {
    typeNumber: 4,
    errorCorrectLevel: 'M',
    size: 240,
  })
  getQrcode()
})

//点击阴影关闭和叉按钮关闭
const closeDlalog = () => {
  emits('close')
}
</script>
